<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center setting">
        <div class="main-left">
          <div class="conn">
            <ul class="nav-menu">
              <li @click="goProfile()">
                资料设置
                <i></i>
              </li>
              <li class="cur" @click="goSetting()">
                账号设置
                <i></i>
              </li>
            </ul>
            <div class="clear"></div>
            <ul class="form-area">
              <li>
                <span class="tit">账号</span>
                <div class="r-text">{{ userInfo.username }}</div>
              </li>
              <li>
                <span class="tit">账号到期时间</span>
                <div class="r-text">{{ userInfo.endtime }}</div>
              </li>
              <li>
                <span class="tit">手机号</span>
                <div class="r-text">
                  {{ userInfo.mobile != '' ? userInfo.mobile : '未绑定手机'}}
                  <label
                    class="act fr"
                    @click="
                      isNobind = true;
                      type = 'mobile';
                    "
                    v-if="userInfo.mobile == ''"
                  >绑定</label>
                  <label class="act fr" @click="changeBind('mobile')" v-else>解绑</label>
                </div>
              </li>
              <li>
                <span class="tit">QQ</span>
                <div class="r-text">
                  {{ userInfo.qq }}
                  <label class="act fr" @click="goQQ()" v-if="userInfo.qq == ''">绑定</label>
                  <label class="act fr" @click="changeBind('QQ')" v-else>解绑</label>
                </div>
              </li>
              <li>
                <span class="tit">微信</span>
                <div class="r-text">
                  {{ userInfo.wx }}
                  <label class="act fr" @click="goVX()" v-if="userInfo.wx == ''">绑定</label>
                  <label class="act fr" @click="changeBind('wechat')" v-else>解绑</label>
                </div>
              </li>
            </ul>
            <div class="mt30">
              <el-button
                @click="
                  isChaPwd = true;
                  isbind = false;
                "
              >修改密码</el-button>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img">
              <img src="static/img/r-back.png" alt />
            </div>
            <div class="menu-item">返回</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img">
              <img src="static/img/r-home.png" alt />
            </div>
            <div class="menu-item">首页</div>
          </div>
        </div>
      </div>
    </div>

    <div class="myDig" v-if="isChaPwd == true">
      <div class="title">
        修改密码
        <span class="closed" @click="isChaPwd = false;">
          <img src="static/img/closed.png" />
        </span>
      </div>
      <div class="cont">
        <ul>
          <li>已绑定手机号：{{ userInfo.mobile }}</li>
          <li>
            <el-input v-model="codeY" placeholder="请输入绑定手机号验证码"></el-input>
            <el-button
              type="primary"
              :class="['  send-code', disabled ? 'el-button-code-disabled' : '']"
              @click="bindSendCode(1)"
              :disabled="disabled"
            >{{ btnTitle }}</el-button>
          </li>
          <li>
            <el-input v-model="password" type="password" placeholder="请输入密码，输入至少6个字符"></el-input>
          </li>

          <li>
            <el-input v-model="confirmPwd" type="password" placeholder="确认密码"></el-input>
          </li>
        </ul>
        <div class="mt30 botact">
          <el-button @click="changePwd()">确定</el-button>
          <el-button type="info" @click="isChaPwd = false">取消</el-button>
        </div>
      </div>
    </div>

    <div class="myDig" v-if="isbind == true">
      <div class="title">
        解除绑定
        <span class="closed" @click="isbind = false;phone='';input=''">
          <img src="static/img/closed.png" />
        </span>
      </div>
      <div class="cont">
        <ul>
          <li v-if="userInfo.mobile!=''&&userInfo.mobile!=undefined">已绑定手机号：{{ userInfo.mobile }}</li>
          <li v-else>暂无手机号</li>
          <li>
            <el-input v-model="input" placeholder="请输入绑定手机号验证码"></el-input>
            <el-button
              type="primary"
              :class="['  send-code', disabled ? 'el-button-code-disabled' : '']"
              @click="bindSendCode(3)"
              :disabled="disabled"
            >{{ btnTitle }}</el-button>
          </li>
        </ul>
        <div class="mt30">
          <el-button @click="goRelieve('mobile')">解除绑定</el-button>
        </div>
      </div>
    </div>

    <div class="myDig" v-if="isNobind == true">
      <div class="title">
        绑定手机号
        <span class="closed" @click="isNobind = false;phone='';input=''">
          <img src="static/img/closed.png" />
        </span>
      </div>
      <div class="cont">
        <ul>
          <li>
            <el-input v-model="phone" type="text" placeholder="请输入绑定手机号"></el-input>
          </li>
          <li>
            <el-input v-model="input" placeholder="请输入绑定手机号验证码"></el-input>
            <el-button
              type="primary"
              :class="['  send-code', disabled ? 'el-button-code-disabled' : '']"
              @click="bindSendCode(2)"
              :disabled="disabled"
            >{{ btnTitle }}</el-button>
          </li>
        </ul>
        <div class="mt30">
          <el-button @click="goBind()">立即绑定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue'
export default {
  data() {
    return {
      codeNumber: '',
      btnTitle: '获取验证码',
      btnTitle1: '获取验证码',
      disabled: false,
      isNobind: false,
      phone: '',
      codeY: '',
      password: '',
      confirmPwd: '',
      checked: false,
      isTip: true,
      seconds: 60,
      isChaPwd: false,
      isbind: false,
      userInfo: {},
      input: '',
      token: localStorage.getItem('token'),
      code: '',
      state: '',
      isVX: false,
      type: '',
      second: 60,
      id: '',
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.phone = this.userInfo.mobile
    this.code = this.$route.query.code
    this.state = this.$route.query.state
    this.type = this.$route.query.type
    console.log(this.userInfo)
    //this.govx();
    this.getCode()
    console.log('creat')
  },
  methods: {
    changeBind(type) {
      this.isbind = true
      this.type = type
    },
    goBind(type) {
      console.log(this.phone)
      this.$api('user.binging', {
        token: this.token,
        mobile: this.phone,
        code: this.input,
        type: this.type,
      }).then((res) => {
        this.isNobind = false
        this.$message(res.msg)
        this.$api('user.getuser', { token: this.token }).then((resUser) => {
          localStorage.setItem('userInfo', JSON.stringify(resUser.data))
          this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
          this.input = ''
          this.disabled = false
          this.doLoop()
        })
      })
    },
    //解绑
    goRelieve(type) {
      console.log(this.type)
      console.log(this.userInfo.mobile)
      this.$api('user.relieve', {
        token: this.token,
        type: this.type,
        mobile: this.userInfo.mobile,
        captcha: this.input,
      }).then((res) => {
        this.isbind = false
        this.$message(res.msg)
        this.$api('user.getuser', { token: this.token }).then((resUser) => {
          localStorage.setItem('userInfo', JSON.stringify(resUser.data))
          this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
          this.input = ''
          this.disabled = false
          this.phone = ''
          this.doLoop()
        })
      })
    },

    getCode() {
      console.log(this.code)
      if (this.code != undefined) {
        console.log(this.code != '')
        if (this.type == 'qq') {
          console.log('isqq')
          //qq
          this.$api('user.pc_qq_login', {
            code: this.code,
            state: this.state,
          }).then((res) => {
            if (res.code == 1) {
              this.$message('绑定成功')
              this.$api('user.getuser', { token: this.token }).then(
                (resUser) => {
                  localStorage.setItem('userInfo', JSON.stringify(resUser.data))
                  this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
                  // window.location.reload();
                }
              )
            } else {
              this.$message(res.msg)
            }
          })
        } else {
          console.log('isvx')
          //微信
          this.$api('user.pc_third_login', {
            code: this.code,
            state: this.state,
          }).then((res) => {
            if (res.code == 1) {
              this.$message('绑定成功')
              this.$api('user.getuser', { token: this.token }).then(
                (resUser) => {
                  localStorage.setItem('userInfo', JSON.stringify(resUser.data))
                  this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
                  //  window.location.reload();
                }
              )
            } else {
              this.$message(res.msg)
            }
          })
        }
      }
    },
    goVX() {
      this.$api('user.pc_third_login_url', { token: this.token, type: 1 }).then(
        (res) => {
          window.open(res.data)
        }
      )
    },
    goQQ() {
      //https://d-zhzh.bigchun.com/#/setting?code=0812v60w3CzxjX29xb3w3fc3En22v60x&state=4b8eeb2a-3f54-4021-b594-4de1e06bc75f
      this.$api('user.pc_qq_login_url', { token: this.token, type: 1 }).then(
        (res) => {
          window.open(res.data)
        }
      )
    },
    changePwd() {
      if (!this.codeY.trim()) {
        this.$message.error('请输入验证码')
        return
      }
      if (this.password.length < 6 || this.password.length > 18) {
        this.$message.error('请输入6-18位的密码')
        return
      }
      var flag = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
      )
      if (flag.test(this.password)) {
        this.$message.error('密码不能有特殊字符')
        return
      }
      if (this.password.trim() != this.confirmPwd) {
        this.$message.error('两次输入密码不一致，请重试')
        return
      }
      let formData = {
        mobile: this.phone,
        captcha: this.codeY,
        newpassword: this.password,
        type: 'mobile',
      }
      this.$api('user.resetpwd', formData).then((res) => {
        if (res.code == 1) {
          console.log(res)
          this.$message.success('密码修改成功，请重新登录')
          localStorage.setItem('token', '')
          setTimeout(() => {
            this.$router.push('/')
          }, 1500)
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        }
      })

      //  console.log("修改成功，登录成功")
      this.isTip = true
    },
    switchLogin() {
      this.$router.push('/')
    },
    bindSendCode(type) {
      console.log(this.phone)
      //修改密码是1，解绑是2
      var event
      if (type == 1) {
        event = 'resetpwd'
      } else if (type == 2) {
        event = 'changemobile'
      } else {
        event = 'relievemobile'
        this.phone = this.userInfo.mobile
      }
      if (this.phone.trim().length != 11) {
        this.$message.error('请输入正确的手机号码')
        return
      }
      this.disabled = true
      this.btnTitle = '请稍候...'
      setTimeout(() => {
        this.doLoop()
      }, 500)

      let formData = {
        mobile: this.phone,
        event: event,
      }
      this.$api('login.sms', formData).then((res) => {
        if (res.code == 1) {
          console.log(res)
          this.$message.success('已发送验证码，请查收')
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
          this.seconds = 0
          this.disabled = false
          this.btnTitle = '获取验证码'
        }
      })
    },
    doLoop() {
      this.seconds = 60
      console.log('doloop')
      console.log(this.seconds)
      let countdown = setInterval(() => {
        if (this.seconds == 0 || this.disabled == false) {
          clearInterval(countdown)
          this.disabled = false
          this.btnTitle = '获取验证码'
        } else {
          this.btnTitle = this.seconds + '秒后重试'
          this.seconds--
        }
      }, 1000)
    },
    goBack() {
      this.$router.replace('/index')
    },
    goHome() {
      this.$router.push(localStorage.getItem('jump_path'))
      // this.$router.push('/index');
    },
    goProfile() {
      this.$router.replace('/profile')
    },
    goSetting() {
      this.$router.replace('/setting')
    },
    openDigBind() {
      this.data.isbind = true
    },
    openChaPwd() {
      this.data.isChaPwd = true
    },
  },
  components: { Header },
}
</script>

<style lang="scss" scoped></style>
